<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-12-14 16:17:14
 * @LastEditTime: 2023-09-08 11:57:04
-->
<script setup lang="ts" name="Password">
import useUserStore from '@g/store/modules/user'
import { ikStore, ikValidate } from 'iking-utils'
import { userApi } from '@/MainApp/apis/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['success'])
const { t, dialog } = useConfig()
const { msgSuccess, msgError } = useMessage()
const userStore = useUserStore()

const _visible = computed(() => props.visible)
const type = computed(() => userStore.pwdType)
const refPass = ref()
const form = ref({
  newPassword: '',
  newPassword_r: '',
  oldPassword: '',
  userId: ''
})

const rules = {
  newPassword: [
    {
      required: true,
      validator: (rule: any, value: any, cb: any) => {
        if (!value)
          cb('请输入新密码')
        else if (value === form.value.oldPassword)
          cb('新密码不能和原密码相同')
        else if (!ikValidate.password.test(value))
          cb('至少6位，且包含大小写字母、数字、符号(+-.!@#$%^&*?)')

        cb()
      },
      trigger: 'blur'
    }
  ],
  newPassword_r: [
    {
      required: true,
      validator: (rule: any, value: any, cb: any) => {
        if (!value)
          cb('请重复新密码')

        if (value !== form.value.newPassword)
          cb('两次输入密码不一致')

        cb()
      },
      trigger: 'blur'
    }
  ],
  oldPassword: [
    {
      required: true,
      validator: (rule: any, value: any, cb: any) => {
        if (!value) {
          cb('请输入原密码')
        }
        else {
          cb()
          refPass.value?.validateField(['newPassword'])
        }
      },
      trigger: 'blur'
    }
  ]
}

const handUpdatePassword = async () => {
  refPass.value?.validate(async (valid: any) => {
    if (valid) {
      const userInfo = await ikStore.local.getItem(ELocal.USER_INFO)
      const param: any = { ...form.value }
      param.userId = userInfo?.id
      const { success, msg } = await userApi.updatePwd(param)
      if (success) {
        msgSuccess(msg)
        emit('success', form.value)
        refPass.value?.resetFields()
      }
      else { msgError(msg) }
    }
  })
}
const handCancel = () => {
  userStore.updatePwdVisible(false, type.value)
  refPass.value?.resetFields()
}
</script>

<template>
  <el-dialog
    v-model="_visible"
    destroy-on-close
    draggable
    :width="dialog.sl"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :title="type === 'timeout' ? '密码已过期，请修改密码' : '修改密码'"
  >
    <template #default>
      <el-form
        ref="refPass"
        :model="form"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item prop="oldPassword" label="原密码">
          <el-input
            v-model.trim="form.oldPassword"
            type="password"
            placeholder="请输入原密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input
            v-model.trim="form.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="newPassword_r" label="重复新密码">
          <el-input
            v-model.trim="form.newPassword_r"
            type="password"
            placeholder="请重复输入新密码"
            show-password
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handCancel">
          {{ type === 'timeout' ? t("validate.nextModify") : t('action.cancel') }}
        </el-button>
        <el-button type="primary" @click="handUpdatePassword">
          {{
            t("action.sure")
          }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style  lang="scss" scoped>
:deep(.el-form-item__error){
  word-break: break-all;
}
</style>
